<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5可交互的圆形进度条特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="static/css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="static/css/default.css">
	<link rel="stylesheet" type="text/css" href="static/css/styles.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>HTML5可交互的圆形进度条特效 <span>A HTML5 Pie Ring</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/html5/html5donghua/201508082379.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div data-to-value='77' data-items-count='32' id="p1_barPie" class="barPie barPie--radio">
		  <span class="barPie__value">0</span>
		  <div class="barPie__ring">
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem31" value="100" hidden="hidden"/>
		    <label for="p1_barPieItem31" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem30" value="96.875" hidden="hidden"/>
		    <label for="p1_barPieItem30" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem29" value="93.75" hidden="hidden"/>
		    <label for="p1_barPieItem29" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem28" value="90.625" hidden="hidden"/>
		    <label for="p1_barPieItem28" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem27" value="87.5" hidden="hidden"/>
		    <label for="p1_barPieItem27" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem26" value="84.375" hidden="hidden"/>
		    <label for="p1_barPieItem26" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem25" value="81.25" hidden="hidden"/>
		    <label for="p1_barPieItem25" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem24" value="78.125" hidden="hidden"/>
		    <label for="p1_barPieItem24" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem23" value="75" hidden="hidden"/>
		    <label for="p1_barPieItem23" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem22" value="71.875" hidden="hidden"/>
		    <label for="p1_barPieItem22" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem21" value="68.75" hidden="hidden"/>
		    <label for="p1_barPieItem21" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem20" value="65.625" hidden="hidden"/>
		    <label for="p1_barPieItem20" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem19" value="62.5" hidden="hidden"/>
		    <label for="p1_barPieItem19" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem18" value="59.375" hidden="hidden"/>
		    <label for="p1_barPieItem18" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem17" value="56.25" hidden="hidden"/>
		    <label for="p1_barPieItem17" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem16" value="53.125" hidden="hidden"/>
		    <label for="p1_barPieItem16" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem15" value="50" hidden="hidden"/>
		    <label for="p1_barPieItem15" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem14" value="46.875" hidden="hidden"/>
		    <label for="p1_barPieItem14" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem13" value="43.75" hidden="hidden"/>
		    <label for="p1_barPieItem13" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem12" value="40.625" hidden="hidden"/>
		    <label for="p1_barPieItem12" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem11" value="37.5" hidden="hidden"/>
		    <label for="p1_barPieItem11" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem10" value="34.375" hidden="hidden"/>
		    <label for="p1_barPieItem10" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem9" value="31.25" hidden="hidden"/>
		    <label for="p1_barPieItem9" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem8" value="28.125" hidden="hidden"/>
		    <label for="p1_barPieItem8" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem7" value="25" hidden="hidden"/>
		    <label for="p1_barPieItem7" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem6" value="21.875" hidden="hidden"/>
		    <label for="p1_barPieItem6" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem5" value="18.75" hidden="hidden"/>
		    <label for="p1_barPieItem5" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem4" value="15.625" hidden="hidden"/>
		    <label for="p1_barPieItem4" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem3" value="12.5" hidden="hidden"/>
		    <label for="p1_barPieItem3" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem2" value="9.375" hidden="hidden"/>
		    <label for="p1_barPieItem2" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem1" value="6.25" hidden="hidden"/>
		    <label for="p1_barPieItem1" class="barPie__ring__item"></label>
		    <input type="radio" name="barPieRadioGroup" id="p1_barPieItem0" value="3.125" hidden="hidden"/>
		    <label for="p1_barPieItem0" class="barPie__ring__item"></label>
		  </div>
		</div>
	</div>
	
	<script src='static/js/stopExecutionOnTimeout.js?t=1'></script>
	<script src='static/js/do-in.js'></script>
	<script>
	(function (ELEMENT) {
	    ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector || ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
	    ELEMENT.closest = ELEMENT.closest || function closest(selector) {
	        var element = this;
	        while (element) {
	            if (window.CP.shouldStopExecution(1)) {
	                break;
	            }
	            if (element.matches(selector))
	                break;
	            element = element.parentElement;
	        }
	        window.CP.exitedLoop(1);
	        return element;
	    };
	}(Element.prototype));
	var barPie = {
	    onChnage: function (e) {
	        if (e.target.name != 'barPieRadioGroup')
	            return;
	        var scopeElm = e.target.closest('.barPie--radio');
	        barPie.update(scopeElm, +e.target.value);
	        if (!scopeElm.active)
	            scopeElm.querySelector('.barPie__ring').lastElementChild.addEventListener('click', barPie.clickToNull);
	        scopeElm.active = 1;
	    },
	    clickToNull: function () {
	        var that = this;
	        if (this.previousElementSibling.checked)
	            setTimeout(function () {
	                that.previousElementSibling.checked = false;
	                that.closest('.barPie--radio').querySelector('.barPie__value').innerHTML = '0';
	            }, 0);
	    },
	    update: function (scopeElm, value, speed, extraStep) {
	        if (!scopeElm)
	            return;
	        var valueElm = scopeElm.querySelector('.barPie__value'), inital = +valueElm.innerHTML, delta = value - inital, doin;
	        function step(t, elapsed) {
	            t = 1 - Math.exp(-t * 7);
	            var value = delta * t + inital, remainder = value % 1;
	            if (t > 0.99 && (remainder > 0.9 || remainder < 0.01)) {
	                value = Math.round(value);
	                doin.step = function () {
	                };
	            } else
	                value = value.toFixed(remainder ? 1 : 0);
	            valueElm.innerHTML = value;
	            if (extraStep)
	                extraStep(t);
	        }
	        if (!valueElm.doin) {
	            doin = new Doin(step, speed || 0.33);
	            valueElm.doin = doin;
	        } else
	            doin = valueElm.doin;
	        doin.step = step;
	        doin.run();
	    }
	};
	document.addEventListener('change', barPie.onChnage);
	var barPies = document.querySelectorAll('.barPie');
	setTimeout(lazyCount, 1500);
	function lazyCount() {
	    var currentBarPie, toValue, itemsCount;
	    function step(t) {
	        var itemIdx = Math.round(itemsCount * (toValue / 100) * t);
	        document.getElementById(currentBarPie.id + 'Item' + itemIdx).checked = true;
	    }
	    for (var i = barPies.length; i--;) {
	        if (window.CP.shouldStopExecution(2)) {
	            break;
	        }
	        currentBarPie = barPies[i];
	        toValue = currentBarPie.dataset.toValue;
	        if (toValue) {
	            itemsCount = currentBarPie.dataset.itemsCount;
	            barPie.update(currentBarPie, toValue, 1.5, step);
	        }
	    }
	    window.CP.exitedLoop(2);
	}
	</script>
</body>
</html>